<template>
  <div>
    <el-dialog custom-class="dialog"  title="分类选择" width="44%" :modal-append-to-body="false" append-to-body :before-close="handleClose" v-el-drag-dialog :visible="isShow">
      <div style="height: 48vh;overflow: auto;position: relative;">
        <el-tree highlight-current  :data="tableData" :props="defaultProps" node-key="id"
                 ref="treeForm"
                 show-checkbox
                 check-strictly
                 @check-change="handleClick"
                 @node-click="nodeClick">
        </el-tree>
      </div>
      <div class="dialog-button-slot">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
  .dialog{
    .el-dialog__header{
      border-bottom: 1px solid #eee;
    }
  }
  .dialog-button-slot{
    width: 100%;
    padding-top: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
<script>
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import utils from '../../utils/utils.js'
  import request from '@/utils/request'
  export default {
    directives: { elDragDialog },
    data() {
      return {
        disabled: true,
        isShow: false,
        tableData: [],
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        rowData: {}
      }
    },
    props: {
      request:'',
    },
    created() {

    },
    methods: {
      nodeClick(data,checked,node){
        if(data.disabled==false){
          this.$refs.treeForm.setCheckedNodes([data]);
          this.rowData = data;
          this.disabled = false;
        }
      },
      handleClick(data, checked, node){
        if(checked == true){
          this.$refs.treeForm.setCheckedNodes([data]);
          this.rowData = data;
          this.disabled = false;
        }
      },
      resetDisabled (treeData) {
        var _this = this;
        treeData.forEach(function (item) {
          item.disabled = false;
          _this.resetDisabled(item.childrens)
        })
      },
      setDisabled (treeData) {
        var _this = this;
        treeData.forEach(function (item) {
          item.disabled = true;
          _this.setDisabled(item.childrens)
        })
      },
      treeControl (id) {
        if(!utils.isNull(id)){//禁选自己和子节点
          const obj = utils.findTree(id, this.tableData)
          this.resetDisabled(this.tableData);
          obj.disabled = true
          this.setDisabled(obj.childrens)
        } else {
          this.resetDisabled(this.tableData);
        }
        this.isShow = true
      },
      show(id) {
        this.loadList(id)
      },
      handleClose(){
        this.isShow = false
      },
      confirm() {
        this.isShow = false;
        this.$emit('confirm', this.rowData)
      },
      loadList(id){
        let _this = this;
        request({
          url: '/admin/'+this.request+'/list',
          method: 'get',
        }).then(response => {
          console.log(response)
            _this.tableData = response.data
            _this.treeControl(id);
        }).catch(error => {
        })
      },
    }
  }
</script>
